import React from 'react';
import { Info, Github, Heart, Code } from 'lucide-react';

const About: React.FC = () => {
  return (
    <div className="min-h-screen bg-slate-50">
      {/* 页面标题 */}
      <div className="bg-white border-b border-gray-200 px-6 py-4">
        <h1 className="text-2xl font-bold text-gray-900">关于</h1>
        <p className="text-gray-600 mt-1">了解YAML编辑器的更多信息</p>
      </div>
      
      <div className="max-w-4xl mx-auto p-6">
        <div className="space-y-6">
          {/* 应用信息 */}
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center gap-3 mb-4">
              <Info className="h-5 w-5 text-blue-600" />
              <h2 className="text-lg font-semibold text-gray-900">应用信息</h2>
            </div>
            
            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-gray-600">应用名称:</span>
                <span className="font-medium">可视化YAML编辑器</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">版本:</span>
                <span className="font-medium">1.0.0</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">构建时间:</span>
                <span className="font-medium">2024-01-15</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">技术栈:</span>
                <span className="font-medium">React + TypeScript + Monaco Editor</span>
              </div>
            </div>
          </div>
          
          {/* 功能特性 */}
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center gap-3 mb-4">
              <Code className="h-5 w-5 text-blue-600" />
              <h2 className="text-lg font-semibold text-gray-900">功能特性</h2>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <h3 className="font-medium text-gray-900">编辑功能</h3>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• YAML语法高亮</li>
                  <li>• 实时错误检测</li>
                  <li>• 自动缩进和格式化</li>
                  <li>• 代码折叠</li>
                  <li>• 查找和替换</li>
                </ul>
              </div>
              
              <div className="space-y-2">
                <h3 className="font-medium text-gray-900">预览功能</h3>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 实时预览</li>
                  <li>• 树形结构展示</li>
                  <li>• JSON格式切换</li>
                  <li>• 可折叠节点</li>
                  <li>• 语法验证</li>
                </ul>
              </div>
              
              <div className="space-y-2">
                <h3 className="font-medium text-gray-900">文件管理</h3>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 本地文件导入导出</li>
                  <li>• 历史记录管理</li>
                  <li>• 自动保存</li>
                  <li>• 文件版本对比</li>
                  <li>• 批量操作</li>
                </ul>
              </div>
              
              <div className="space-y-2">
                <h3 className="font-medium text-gray-900">个性化</h3>
                <ul className="text-sm text-gray-600 space-y-1">
                  <li>• 主题切换</li>
                  <li>• 字体大小调节</li>
                  <li>• 快捷键配置</li>
                  <li>• 编辑器设置</li>
                  <li>• 响应式布局</li>
                </ul>
              </div>
            </div>
          </div>
          
          {/* 快捷键说明 */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">快捷键说明</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <h3 className="font-medium text-gray-900">编辑操作</h3>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-600">格式化代码:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + Shift + F</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">查找:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + F</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">替换:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + H</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">撤销:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + Z</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">重做:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + Y</kbd>
                  </div>
                </div>
              </div>
              
              <div className="space-y-2">
                <h3 className="font-medium text-gray-900">文件操作</h3>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-600">保存:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + S</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">打开文件:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + O</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">新建文件:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + N</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">全选:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + A</kbd>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">复制:</span>
                    <kbd className="px-2 py-1 bg-gray-100 rounded text-xs">Ctrl + C</kbd>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          {/* 开源信息 */}
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center gap-3 mb-4">
              <Heart className="h-5 w-5 text-red-500" />
              <h2 className="text-lg font-semibold text-gray-900">开源项目</h2>
            </div>
            
            <p className="text-gray-600 mb-4">
              这是一个开源项目，使用MIT许可证。我们欢迎社区贡献和反馈。
            </p>
            
            <div className="flex gap-4">
              <a 
                href="#" 
                className="flex items-center gap-2 text-blue-600 hover:text-blue-800 transition-colors"
              >
                <Github size={16} />
                GitHub仓库
              </a>
              <a 
                href="#" 
                className="flex items-center gap-2 text-blue-600 hover:text-blue-800 transition-colors"
              >
                <Info size={16} />
                问题反馈
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;